<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>必应助手</title>
    <script src="popup.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .form {
            width: 250px;
            height: 145px;
            padding: 12px;
        }

        .form-item {
            background: white;
            margin-top: 6px;
            align-items: center;
        }

        .form-item:first-child {
            margin-top: 0;
        }

        .item-label {
            font-size: 12px;
        }

        .d-flex {
            display: flex;
        }

        .btn {
            height: 24px;
            background: dodgerblue;
            color: white;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 5px;
            font-size: 12px;
            border-radius: 3px;
        }

        .btn-danger{
            background: #f44336;
        }

        input:focus-visible {
            outline: 0; /* 聚焦时显示蓝色轮廓 */
        }

        input:not(:focus-visible) {
            outline: none; /* 失去焦点时移除轮廓 */
        }
    </style>
</head>
<body>
<div class="form">
    <div class="form-item d-flex">
        <b style="font-size: 14px;">必应积分助手 <span id="state"></span></b>
    </div>
    <div class="form-item d-flex">
        <div class="item-label">获取词条个数</div>
        <input type="number" id="entriesMax" min="30" value="35"
               style="margin-left: 12px;width: 60px;border-bottom: 1px solid #000000;">
    </div>
    <hr style="margin: 12px 0;border-bottom: 1px solid #000000;">
    <div class="form-item d-flex">
        <div class="item-label">自动签到</div>
        <input type="checkbox" id="isAutoSignIn" style="margin-left: 12px">
    </div>
    <div class="form-item d-flex">
        <div class="item-label">自动签到时间</div>
        <input type="time" id="executionTime" value="12:30" style="margin-left: 12px;border-bottom: 1px solid #000000;">
    </div>
    <div class="form-item d-flex" style="margin-top: 12px;">
        <a class="btn" id="btnSearch" href="javascript:;">直接搜索</a>
        <a class="btn btn-danger" id="btnClear" style="margin-left:12px;" href="javascript:;">清空缓存</a>
    </div>
</div>
</body>
</html>